import { Component } from 'vue-property-decorator';
import { VNode, VNodeData } from 'vue';
import { VueLifeCycleProcessing } from '../../decorators';
import { LayoutItemBasicComponent } from '../../base-components';
import './layout-panel.less';

/**
 * 布局容器
 *
 * @author chitanda
 * @date 2022-02-16 18:02:53
 * @export
 * @class LayoutPanel
 * @extends {Vue}
 */
@Component
@VueLifeCycleProcessing()
export class LayoutPanel extends LayoutItemBasicComponent {
  render(): VNode {
    const vNodeData: VNodeData = {
      props: {
        panel: this.panel,
        data: this.data,
      },
    };

    let content: VNode | null = null;
    const { layout } = this.data;
    if (layout === 'gird') {
      content = <grid-layout {...vNodeData} />;
    } else if (layout === 'absolute') {
      content = <absolute-layout {...vNodeData} />;
    } else if (layout === 'table') {
      content = <table-layout {...vNodeData} />;
    }
    return (
      <div class='layout-panel'>
        布局容器-{this.data.layout}-{this.data.label}
        {content}
      </div>
    );
  }
}
